<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red-bg{background:red}
        .green-bg{background: green}
    </style>
</head>
<body>
<!-- Vue的数据会展示到该div中-->
<div id="app">
    <p>{{message}}</p>
    <p>姓名：{{person.name}},年龄：{{person.age}},性别：{{person.gender}}</p>
    <p v-if="person.age >= 18">{{person.name}}是成年人！！！</p>
    <p v-else>{{person.name}}是未成年人！！</p>
    <p v-show="person.gender=='男'">{{person.name}}是男的</p>
    <p v-show="person.gender=='女'">{{person.name}}是女的</p>
    <p>姓名：<input type="text" v-model="person.name"> </p>
    <p>年龄：<input type="text" v-model="person.age"> </p>
    <p>性别：<input type="text" v-model="person.gender"> </p>

    <table border="1px" :width="width">
        <tr>
            <th>姓名</th><th>年龄</th><th>性别</th>
        </tr>
        <tr v-for="per in persons" :class="per.gender=='男' ? 'red-bg' : 'green-bg'" @click="showPerson(per)">
            <td>{{per.name}}</td>
            <td>{{per.age}}</td>
            <td>{{per.gender}}</td>
        </tr>
    </table>
</div>
<!--    导入vue的js文件-->
<script src="js/vue.min.js"></script>
<script>
    // 创建Vue对象  ViewModel
    // el是表达式，定位数据展示的位置
    // data是model，需要绑定的数据都定义在data里面
    // methods是方法，定义事件处理的方法
    new Vue({
        el: "#app",
        data: {
            message: "Hello Vue！！！！",
            person: {name:"张三",age:"20",gender:"男"},
            width:"800px",
            persons:[
                {name:"张三",age:"20",gender:"男"},
                {name:"李四",age:"22",gender:"女"},
                {name:"王五",age:"23",gender:"男"},
                {name:"赵六",age:"18",gender:"女"}
            ]
        },
        methods:{
            //显示人的信息
            showPerson(per){
                alert('此人是：' + per.name + '，年龄：' + per.age + '，性别：' + per.gender)
            }
        }
    })
</script>
</body>
</html>